<template>
	<view class="publish-page">
		<u-toast ref="uToast"></u-toast>
		<view class="form-container">
			<u-form :model="form" ref="uForm" label-width="90">
				<view class="form-box-title">招亲条件</view>
				<u-cell title="年龄">
					<view slot="value">
						<u-input v-model="form.age" border="none" type="number" inputAlign="right"
							placeholder="请输入年龄" />
					</view>
				</u-cell>

				<u-cell title="身高(cm)">
					<view slot="value">
						<u-input v-model="form.height" border="none" type="number" inputAlign="right"
							placeholder="请输入身高" />
					</view>
				</u-cell>

				<u-cell title="学历" isLink @click="clickSelectNative('educationBackground')">
					<view slot="value">
						<u-input v-model="form.educationBackground" border="none" readonly inputAlign="right" />
					</view>
				</u-cell>

				<u-cell title="职业">
					<view slot="value">
						<u-input v-model="form.occupation" border="none" inputAlign="right" placeholder="请输入职业" />
					</view>
				</u-cell>

				<u-cell title="籍贯" isLink @click="clickSelectNative('nativeAddr')">
					<view slot="value">
						<u-input v-model="form.nativeAddr" border="none" readonly inputAlign="right" />
					</view>
				</u-cell>

				<u-cell title="工作城市" isLink @click="clickSelectNative('workAddr')">
					<view slot="value">
						<u-input v-model="form.workAddr" border="none" readonly inputAlign="right" />
					</view>
				</u-cell>

				<u-cell title="房子" isLink @click="clickSelectNative('house')">
					<view slot="value">
						<u-input v-model="form.house" border="none" readonly inputAlign="right" />
					</view>
				</u-cell>

				<u-cell title="车子" isLink @click="clickSelectNative('car')">
					<view slot="value">
						<u-input v-model="form.car" border="none" readonly inputAlign="right" />
					</view>
				</u-cell>

				<view class="form-box-title">家庭情况描述</view>
				<u-textarea v-model="form.familyBackground" placeholder="请输入内容"></u-textarea>
			</u-form>
			<u-picker :show="showSelectNative" ref="uPicker" keyName="name" :columns="columns" @cancel="cancel"
				:defaultIndex="pickerIndex" @confirm="confirm" @change="changeHandler"></u-picker>
			<view class="submit-btn">
				<u-button type="primary" @click="submitForm" :loading="loading">确认发布</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '@/api'
	import { generatePaySign } from '@/utils'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				amount: 0,
				loading: false,
				hobbiesText: '',
				showSelectNative: false,
				provinceData: [],
				nativeAddrIndex: [],
				workAddrIndex: [],
				form: {
					title: '',
					content: '',
					photos: [],
					age: '',
					height: '',
					education: '',
					job: '',
					hobbies: [],
					days: 30
				},
				rules: [],
				columns: [
					[],
					[]
				],
				citys: [],
				pickerIndex: [0, 0],
				currentClick: ''
			}
		},
		computed: {
			...mapGetters('user', ["userInfo"]),
		},
		onLoad(options) {
			this.amount = options.amount || 0
			this.loadCity()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 获取城市列表
			loadCity() {
				API.city.getLevelList().then((res) => {
					this.provinceData = res.data
					this.citys[0] = this.provinceData.map(item => ({
						name: item.name,
						value: item.id,
						children: item.children
					}));
					this.$forceUpdate()
				})
			},
			// 打开下拉选择
			clickSelectNative(flag) {
				this.currentClick = flag
				this.columns = []
				switch (flag) {
					case 'educationBackground':
						console.log('学历')
						this.columns = [
							['小学', '初中', '高中/中专', '大专', '本科', '硕士', '博士']
						]
						break;
					case 'nativeAddr':
						console.log('籍贯')
						this.pickerIndex = this.form.nativeAddrIndex
						if (!this.form.nativeAddr || !this.form.nativeAddr.length) {
							this.columns = this.citys
						}
						break;
					case 'workAddr':
						console.log('工作城市')
						this.pickerIndex = this.form.workAddrIndex
						if (!this.form.workAddr || !this.form.workAddr.length) {
							this.columns = this.citys
						}
						this.columns = this.citys
						break;
					case 'house':
						console.log('房子')
						this.columns = [
							[{
								name: '有',
								value: 1
							}, {
								name: '无',
								value: 2
							}]
						]
						break;
					case 'car':
						console.log('车子')
						this.columns = [
							[{
								name: '有',
								value: 1
							}, {
								name: '无',
								value: 2
							}]
						]
						break;
				}
				this.showSelectNative = true
			},
			changeHandler(e) {
				const {
					columnIndex,
					values,
					value,
					index
				} = e;

				// 第一列变化时加载市级数据 
				if (columnIndex === 0 && value[0]) {
					if (['nativeAddr', 'workAddr'].includes(this.currentClick)) {
						const province = this.provinceData.find(p => p.id === value[0].value);
						this.columns[1] = province?.children || [];
						this.$refs.uPicker.setColumnValues(1, this.columns[1]);
					}

					// 重置第三列 
					// this.columns[2] = [];
					// this.$refs.uPicker.setColumnValues(2, []);
				}

				// // 第二列变化时加载区级数据 
				// if (columnIndex === 1 && values[0]) {
				// 	const province = this.provinceData.find(p => p.id === value[0].value);
				// 	const city = province?.children?.find(c => c.id === value[1].id);
				// 	this.columns[2] = city?.children || [];
				// 	this.$refs.uPicker.setColumnValues(2, this.columns[2]);
				// }
			},
			confirm(e) {
				switch (this.currentClick) {
					case 'nativeAddr':
						this.form.nativeAddrIndex = e.indexs
						if (!this.form.nativeAddrIndex || !this.form.nativeAddrIndex.length) {
							this.form.nativeAddrName = [e.value[0].name]
						} else {
							this.form.nativeAddrName = [e.value[0].name, e.value[1].name]
						}
						this.form.nativeAddr = this.form.nativeAddrName.join('/')
						break
					case 'workAddr':
						this.form.workAddrIndex = e.indexs
						if (!this.form.workAddrIndex || !this.form.workAddrIndex.length) {
							this.form.workAddrNames = [e.value[0].name]
						} else {
							this.form.workAddrNames = [e.value[0].name, e.value[1].name]
						}
						this.form.workAddr = this.form.workAddrNames.join('/')
						break
					case 'house':
						this.form.houseIndex = e.indexs
						this.form.house = e.value[0].name
						break
					case 'car':
						this.form.carIndex = e.indexs
						this.form.car = e.value[0].name
						break
					case 'educationBackground':
						this.form.educationBackgroundIndex = e.indexs
						this.form.educationBackground = e.value[0]
						break
				}
				this.cancel()
			},
			cancel() {
				this.showSelectNative = false
			},
			submitForm() {
				// this.loading = true
				let params = {
					...this.form,
					crId: this.userInfo.id
				}
				API.seekSpouse.setAdd(params).then(res => {
					if (res.status == 'success') {
						console.log('调用后端支付接口')
						let prepayId = 'wx123123'
						console.log('拉起支付')
						uni.requestPayment({
							timeStamp: Math.floor(Date.now() / 1000),
							nonceStr: nonceStr,
							package: `prepay_id=${prepay_id}`,
							signType: 'MD5',
							paySign: generatePaySign(appId, timeStamp, nonceStr, `prepay_id=${prepayId}`, key),
							success(payRes) {
								let params = {
									id: res.data.id,
									status: 2,
									payStatus: 2
								}
								API.seekSpouse.setEdit(params).then(payRes => {
									if (payRes.status == 'success') {
										this.$refs.uToast.show({
											message: '发布成功，请等待管理员审核',
											complete() {
												uni.redirectTo({
													url: '/pages/discover/index',
												})
											},
										});
									}
								})
							},
							fail(payErr) {

							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box-title {
		font-weight: bold;
		padding: 15rpx 0;
		margin-bottom: 10rpx;
	}

	.publish-page {
		padding-bottom: 40rpx;
	}

	.form-container {
		padding: 30rpx;
	}

	.submit-btn {
		margin-top: 40rpx;
	}
</style>